<template>
	<div class="answer_container">
		<div class="circle">
			<div class="circle_img" :style="honorImg"></div>
			<div class="circle_name">{{user.nickName}}</div>
			<div class="circle_level">成就：{{passGameInfo.curHonorName}}</div>
		</div>
		<div class="state_div">
			<div class="state">
				<div class="state_content" style="color:#9CCD64;">{{passGameInfo.curCheckPointName}}</div>
				<div class="state_desc">当前关卡</div>
			</div>
			<div class="state_split"></div>
			<div class="state">
				<div class="state_content"><span class="state_content_num">{{passGameInfo.solvedTitleNum}}</span><span style="color:#ABCCFF;font-size: 0.46rem;">/</span><span class="state_content_num" style="color:#ABCCFF;">{{passGameInfo.totalTitleNum}}</span></div>
				<div class="state_desc">任务成就</div>
			</div>
			<div class="state_split"></div>
			<div class="state">
				<div class="state_content" style="color:#FFB71E;font-size: 0.46rem">{{passGameInfo.topNum}}</div>
				<div class="state_desc">榜单排名</div>
			</div>
		</div>
		<div class="period_status">
			<el-row :gutter="0" align="middle" type="flex" justify="space-between" style="width:100%">
				<el-col v-for="(item,index) in passGameInfo.checkPointSet" :key="index">
					<div class="period_div" :title="passGameInfo.curCheckPointId>=item.honorId && tips" 
						:style="backgroundImgById(item,index)" @click="openAnswer(item.checkPointId, index)">
						<div class="period-img"></div>
						<div class="period-finish" v-if="index < curIndex">已通关</div>
						<div class="period-locktext" v-if="index > curIndex">未解锁</div>
						
						<!-- v-if="item.solvedTitleNum<item.totalTitleNum" -->
						<!--进行中的关卡-->
						<template v-if="index == curIndex">
							<div class="period-num">{{item.solvedTitleNum}}/{{item.totalTitleNum}}</div>
							<el-progress :stroke-width=12 :percentage="item.totalTitleNum?item.solvedTitleNum/item.totalTitleNum*100:0" :show-text=false></el-progress>
						</template>
							
						<!-- <div v-if="item.checkPointId > passGameInfo.curCheckPointId" class="period-lock"></div> -->
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="period_step">
			<el-steps :active="curIndex + 1" align-center>
				<el-step v-for="(item,index) in passGameInfo.checkPointSet" :key="index" :title="item.checkPointName" description=""></el-step>
			</el-steps>
		</div>
		<noPublish ref="noPublish"></noPublish>
	</div>
</template>
<script>
	import noPublish from "./subpage/no_publish";
	var vm;
	
	export default {
		components : {
			noPublish
		},
		data: function() {
			return {
				user: {},
				tips: '点击查看',
				passGameInfo: {
					checkPointSet: []
				},
				curIndex : -1 //当前关卡的数组序号
			}
		},
		computed: {
			honorImg: function() {
				if(!this.passGameInfo.curHonorId) {
					return {};
				}
				return {
					backgroundImage: 'url(' + require('../../assets/img/answer_system/level_' + this.passGameInfo.curHonorId + '.png') + ')'
				};
			},
		},
		methods: {
			backgroundImgById: function(item, index) {
				//根据序号判断是否完成,设置图片前缀
				let prefix = "period_unlock_bg";
				if(index < vm.curIndex) {
					prefix = "period_finish";
				}
				if(index > vm.curIndex) {
					prefix = "period_lock_bg";
				}
				//获取图片
				let img = require('@/assets/img/answer_system/' + prefix + item.honorId + '.png');
				//返回背景样式
				return { backgroundImage: 'url(' + img + ')' }
			},
			openAnswer: function(checkPointId, index) {
				
				if(index > vm.curIndex) {
					tool.message({message:"当前关卡尚未解锁", type:"warning", showClose: true});
					return;
				}

				var obj = vm.$store.state.permit["9"];
				if(!obj) {
					tool.message({ showClose: true, message: "当前用户缺少权限", type: 'warning' });
					return;
				}
				//传递参数    
				this.$router.push({
					path: obj.path,
					query: {
						checkPointId
					}
				});

			},
			init: function() {

				let param = {
					userId: vm.user.userId,
					orgId: vm.user.orgId
				}
				//向后台获取状态
				api.passGameInfo(param).then(function(data) {
					//没发布
					if(data.published == "0") {
						vm.$refs.noPublish.init();
						return false;
					}
					//记录阶段Id数组
					let ids = [];
					data.checkPointSet.forEach(function(item) {
						ids.push(item.checkPointId);
					})
					//当前关卡序号
					vm.curIndex = ids.indexOf(data.curCheckPointId);
					if(vm.curIndex<0) {
						vm.curIndex = ids.length;
					}
					vm.passGameInfo = data;
				});

				//当前关卡

				//任务成就
				//榜单排名
				//完成阶段
				//更新用户闯关进度

			}
		},
		created: function() {
			vm = this;
			//获取当前用户
			vm.user = tool.getItem(lsKey.user, true);
		},
		mounted: function() {
			//获取当前用户闯关信息
			vm.init();

		},
	}
</script>
<style lang="scss">
	.answer_container {
		.el-progress {
			postion: relative;
			width: 54%;
			margin: 0 auto;
			top: 25%
			/*0.57rem*/
			;
		}
		.period-finish {
			position: relative;
			width: 100%;
			top: 0.5rem;
			height: 0.5rem;
			text-align: center;
			line-height: .5rem;
			color: #FF7A01;
			font-weight: bold;
		}
		.period-locktext {
			position: relative;
			width: 100%;
			top: 0.5rem;
			height: 0.5rem;
			text-align: center;
			line-height: .5rem;
			color: #343331;
			font-weight: bold;
		}
		.el-progress-bar__outer {
			border: 0.01rem solid rgba(102, 102, 102, 0.1);
		}
		.el-progress-bar__inner {
			background-color: #28acff;
		}
		.el-step__head.is-finish {
			color: #3885f8;
			border-color: #3885f8;
		}
		.el-step__title.is-finish {
			color: rgb(51, 51, 51);
		}
		.el-step__title.is-wait {
			color: rgb(102, 102, 102);
		}
		.el-steps--horizontal {
			margin-top: 0.15rem;
		}
		.el-step.is-horizontal .el-step__line {
			height: 0.1rem;
			border: 0.01rem solid rgba(102, 102, 102, 0.1);
			background-color: white;
			/* box-shadow: 0rem 0rem 0.15rem -0.03rem #0f7845;*/
		}
		.el-step__line-inner {
			height: 0.04rem;
			background-color: #3885f8;
			margin-top: 0.02rem;
		}
		.el-step__icon.is-text {
			border: 0.03rem solid white;
			box-shadow: 0rem 0rem 0.15rem -0.03rem #3885f8;
			background-color: #d3e1ea;
			width: 0.26rem;
			height: 0.26rem;
		}
		.is-finish .el-step__icon.is-text {
			background-color: #3885f8;
			color: white;
		}
	}
</style>
<style scoped>
	.answer_container {
		background-color: #f3f6fc;
		background-image: url(../../assets/img/answer_system/chuangguan_shouye_bg.png);
		background-size: 100% 4.1rem;
		background-repeat: no-repeat;
		/*height: 100%;*/
		padding-bottom: 0.3rem;
	}
	
	.circle {
		position: relative;
		width: 3.02rem;
		height: 3.01rem;
		background-image: url(../../assets/img/answer_system/chuangguan_user_bg.png);
		background-size: 100% 100%;
		margin: 0 auto;
		top: 0.2rem;
		transform: scale(0.9, 0.9);
	}
	
	.circle_img {
		position: relative;
		width: 1.39rem;
		height: 1.35rem;
		background-size: 100% 100%;
		margin: 0 auto;
		top: 0.45rem;
	}
	
	.circle_name {
		position: relative;
		font-size: 0.3rem;
		text-align: center;
		margin: 0 auto;
		top: 0.5rem;
		color: rgb(102, 102, 102);
	}
	
	.circle_level {
		position: relative;
		font-size: 0.2rem;
		text-align: center;
		margin: 0 auto;
		top: 0.6rem;
		color: rgb(102, 102, 102);
	}
	
	.state_div {
		overflow: hidden;
		width: 12.8rem;
		height: 1.4rem;
		margin: 0 auto;
		margin-top: 0.34rem;
		background-color: #ffffff;
		border: 0.01rem solid #eef5f6;
		border-radius: 0.09rem;
		/*box-shadow: 0rem 0rem 0.25rem -0.10rem #0f7845;*/
		/*position: absolute;*/
	}
	
	.state_split {
		position: relative;
		float: left;
		margin: 0 auto;
		top: 25%;
		width: 0.02rem;
		height: 50%;
		border-right: 0.01rem solid #dedede;
	}
	
	.state {
		position: relative;
		width: 33.2%;
		height: 100%;
		float: left;
		text-align: center;
	}
	
	.state_content {
		position: relative;
		top: 0.22rem;
		/*margin-left: 1.8rem;*/
		font-size: 0.36rem;
		color: rgb(51, 51, 51);
		text-align: center;
		/*height:0.61rem;*/
	}
	
	.state_div .state:first-child .state_content {
		top: 0.32rem;
	}
	
	.state_desc {
		position: absolute;
		margin-left: 1.73rem;
		/*margin-right: 1.4rem;*/
		bottom: 0.25rem;
		font-size: 0.2rem;
		color: rgb(102, 102, 102);
	}
	
	.state_content_num {
		color: #3885f8;
		font-size: 0.46rem;
	}
	
	.period_status {
		overflow: hidden;
		width: 13.5rem;
		height: 2.2rem;
		margin: 0 auto;
		margin-top: 0.24rem;
		display: flex;
		flex: 1;
	}
	
	.period_div {
		position: relative;
		width: 2.1rem;
		height: 2rem;
		/*float: left;*/
		text-align: center;
		font-size: 0.2rem;
		/*padding: 0.2rem;*/
		border: none;
		/*background-image: url(../../assets/img/answer_system/period_bg.png);*/
		background-repeat: no-repeat;
		background-position: center top;
		background-size: 85% 85%;
		cursor: pointer;
		margin: 0 auto;
	}
	
	.period-img {
		position: relative;
		width: 1.18rem;
		height: 1.16rem;
		/*background-image: url(../../assets/img/answer_system/period_level_1.png);*/
		background-size: 100% 100%;
		margin: 0 auto;
		top: 0.25rem;
	}
	
	.period-num {
		position: relative;
		width: 60%;
		margin: 0 auto;
		top: 25%
		/*0.57rem*/
		;
		color: rgb(51, 51, 51);
		font-size: 0.18rem;
	}
	
	.period-lock {
		position: relative;
		width: 0.51rem;
		height: 0.66rem;
		background-image: url(../../assets/img/answer_system/period_lock.png);
		background-size: 100% 100%;
		float: right;
		bottom: 0.19rem;
	}
	
	.period_step {
		overflow: hidden;
		width: 13.5rem;
		margin: 0 auto;
		margin-top: 0.1rem;
		font-size: 0.2rem;
		color: rgb(51, 51, 51);
	}
	
	.btnContinue {
		width: 3.5rem;
		height: 0.4rem;
		line-height: 0.4rem;
		border-radius: 0.08rem;
		color: white;
		text-align: center;
		margin: 0 auto;
		margin-top: 0.7rem;
		background-color: #3bb2b8;
		cursor: pointer;
	}
</style>